<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>鼠标悬停闪烁星星插件jQuery-canvas-sparkles</title>
  <style>
    div {
      display: inline-block;
    }
  </style>
</head>

<body>
  <div id="box">
    <div class="demo1">
      <img src="./img/1.jpg">
    </div>
    <div class="demo2">
      <img src="./img/2.jpg">
    </div>
    <div class="demo3">
      <img src="./img/3.jpg">
    </div>
  </div>
  <script src="https://cdn.bootcss.com/jquery/1.10.0/jquery.min.js"></script>
  <script src="https://ityangzhiwen.gitee.io/jquery-canvas-sparkles/lib/jquery-canvas-sparkles.js"></script>
  <script>
    $(document).ready(function () {
      $(".demo1").sparkle({
        //颜色：接收HEX字符串，或者“rainbow”关键字，或一组HEX字符串
        color: ["#2eafea", "#e56604"],
        //一次显示星星的数量
        count: 30,
        // 距离canvas边部多少将会重叠
        overlap: 0,
        // 设置速度
        speed: 1,
        // 最小尺寸
        minSize: 4,
        // 最大尺寸
        maxSize: 7,
        //星星运动的方向，可以是"up", "down" 或 "both"
        direction: "both"
      });
      $(".demo2").sparkle({
        color: "rainbow",
        count: 50,
        overlap: 0,
        speed: 1.5,
        minSize: 5,
        maxSize: 10,
        direction: "both"
      });
      $(".demo3").sparkle({
        color: "rainbow",
        count: 100,
        overlap: 0,
        speed: 2,
        minSize: 5,
        maxSize: 15,
        direction: "both"
      });
    });
  </script>
</body>

</html>